'use strict';
var cmsDirectives = angular.module('cmsDirectives');

cmsDirectives.directive('cmsModuleMenu', ['$rootScope', 'Constant', 'App',  'cmsService', function($rootScope, Constant, App, cmsService) {
    return {
        restrict: 'E',
        replace: true,
        //transclude: true,
        scope: {
            menuItems: '=ngModel'
        },
        link: function(scope, element, attrs) {
            scope.$watch('menuItems', function (newVal, oldVal) {
                if (newVal) {
                    var items = newVal;
                    var ul = angular.element('<ul></ul>');

                    // append the carousel into DOM
                    element.append(ul);
                    ul.jcarousel();

                    // dynamically add items
                    angular.forEach(items, function(item, i) {
                        var cls = item.status===0? 'forbidden':'';

                        ul.jcarousel('add', i + 1, [
                            '<li id="jcarousel-item--' + item.id + '--' + i + '" class="sub-item ' + cls + '">',
                            '<div class="jcarousel-item-inner">',
                                '<div><img src="/ext/themes/' + $rootScope.CurrentApp.theme + '/img/' + item.code +'_h.png" height="30" width="30"></div>',
                                '<div class="title">' + item.title + '</div>',
                            '</div>',
                            '<div class="jcarousel-item-move"></div>',
                            '</li>'
                        ].join(''));
                    });
                    ul.jcarousel({
                        size: items.length,
                        scroll: 5,
                        visible: 5
                        //wrap: 'circular',
                        //itemFallbackDimension: 540
                    });

                    $('li.jcarousel-item').first().addClass('active');
                    var index = $('li.jcarousel-item').first().attr('id').split('--')[2];

                    $rootScope.CurrentSub = items[index];

                    angular.element('#cms-main').scope().showSub();

                        $(".jcarousel-container").delegate('li.jcarousel-item', 'mouseover', function(e){
                            if(!$(this).hasClass("forbidden")){
                                $(this).find('.jcarousel-item-move').css("display", "block");
                            }
                        });
                        $(".jcarousel-container").delegate('li.jcarousel-item','mouseout',function(e){
                            if(!$(this).hasClass("forbidden")){
                                $(this).find('.jcarousel-item-move').css("display", "none");
                            }
                        });

                        var menuItems = $('ul.jcarousel-list');
                        menuItems.sortable({
                            items: 'li.jcarousel-item',
                            axis: 'x',
                            placeholder: 'ui-state-highlight' ,
                            revert: true,
                            scroll: true,
                            tolerance: 'pointer',
                            cursor: 'move',
                            opacity: 0.9,
                            //scrollSpeed:10 ,
                            //scrollSensitivity: 10 ,
                            //distance: 30,
                            stop: function(event, ui){
                                var newIds = [];
                                $('ul.jcarousel-list li.jcarousel-item').each(function() {
                                    newIds.push( $(this).attr('id').split('-')[2]);
                                });
                                var idStr = newIds.join(',');
                                //console.log(idStr);
                                try {
                                    $.ajax({
                                        type : 'GET',
                                        dataType : 'json',
                                        url : Constant.ApiPath + 'sub/changeOrder',
                                        data: {newIds: idStr},

                                        success : function(json, textStatus) {
                                            console.log('Success to change order!!!');
                                        }
                                    });
                                } catch(err) {
                                    console.log(err.name + ': ' + err.message);
                                    menuItems.sortable( "cancel" );
                                }
                            }
                        });
                        menuItems.disableSelection();

                        $(".jcarousel-container").delegate('li.sub-item','click',function(e){
                            if(!$(this).hasClass("forbidden")){
                                $('li.jcarousel-item').removeClass('active');
                                $(this).addClass('active');
                                var index = $(this).attr('id').split('--')[2];
                                $rootScope.CurrentSub = items[index];
                                angular.element('#cms-main').scope().showSub();
                            }
                        });


                }
            });
        }
    }
}]);

